{% extends 'AdminBundle::layout.html.twig' %}

{% block title %}{% if data.data.id == 0 %}添加项目{% else %}编辑项目{% endif %}-申报看板{% endblock %}

{% block css %}
    <link type="text/css" rel="stylesheet" href="{{ asset('assets/css/bootstrap-datetimepicker.min.css') }}">
{% endblock %}


    {% block top %}
        {#{{ dump() }}#}
        {{ parent() }}
    {% endblock %}


    {% block left_body_top %}
        {{ parent() }}
    {% endblock %}


    {% block left_body %}
        {{ parent() }}
    {% endblock %}

    {% block right_body %}
    <div class="page-header">
        <div class="page-right-top">
            <div class="right-top">
                <span class="right-title">申报看板</span>
            </div>
            <div class="top-nav top-nav-active">{% if data.data.id == 0 %}添加项目{% else %}编辑项目{% endif %}</div>
        </div>
        <div class="main-content">
            <form id="member-submit">
                <div class="mes-content" style="margin-top: 0;padding-top: 40px;">
                    <div class="add-mem-box">
                        <div class="mem-left fl">项目名称</div>
                        <input type="text" class="mem-right project-name fl" name="name" value="{% if data.data.id != 0 %}{{ data.data.name|default('') }}{% endif %}" placeholder="请输入项目名称">
                        <div class="clearfix"></div>
                    </div>
                    <div class="add-mem-box">
                        <div class="mem-left fl">项目类型</div>
                        <input type="text" class="mem-right project-type fl" name="type" value="{% if data.data.id != 0 %}{{ data.data.type|default('') }}{% endif %}" placeholder="请输入项目类型">
                        <div class="clearfix"></div>
                    </div>
                    <div class="add-mem-box">
                        <div class="mem-left fl">项目进度</div>
                        <div class="fl" style="margin-left: 42px;">

                            <div class="add-speed-box">

                                {% if data.data.id > 0 %}
                                    {% for item in data.data.progress %}
                                    <div class="add-speed-list" data-starttime="{{ item.start_at|default('')|slice(0,10) }}" data-endtime="{{ item.end_at|default('')|slice(0,10) }}" data-name="{{ item.name }}">
                                        <div class="add-speed-fl fl">{{ item.start_at|default('')|slice(0,10) }} 至 {{ item.end_at|default('')|slice(0,10) }}</div>
                                        <div class="add-speed-fr fr">{{ item.name|default('') }}</div>
                                        <div class="clearfix"></div>
                                        <div class="reset-icon"></div>
                                    </div>
                                {% endfor %}

                                {% endif %}
                            </div>

                            <div class="speed-progress">
                                <div class="mes-input fl mes-date">
                                    <span class="date-icon"></span>
                                    <div class="form-group">
                                        <div class="right col-xs-6 text-left">
                                            <div class="input-group">
                                                <input type="text" style="width: 114px;" class="form-control form_datetime" id="addtime" name="addtime" placeholder="开始时间">
                                                <span class="input-group-addon" id="basic-addon"><span class="glyphicon glyphicon-time" aria-hidden="true"></span></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="mes-input fl mes-date">
                                    <span class="date-icon"></span>
                                    <div class="form-group">
                                        <div class="right col-xs-6 text-left">
                                            <div class="input-group">
                                                <input type="text" style="width: 114px;" class="form-control form_datetime" id="addtimes" name="addtimes" placeholder="结束时间">
                                                <span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-time" aria-hidden="true"></span></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="mes-input fl" style="width: 190px;">
                                    <input type="text" class="keyword-input" style="width: 172px;" placeholder="请输入项目进度">
                                </div>

                                <button class="mes-query-btn fl" type="button">添加进度</button>

                                <div class="clearfix"></div>
                            </div>
                        </div>

                        <div class="clearfix"></div>
                    </div>
                    <div class="add-mem-box">
                        <div class="mem-left fl" style="margin-top: 22px;">项目文件</div>
                        <label class="upload-btn fl" for="upload_file">点击上传</label>

                        <div class="upload-finish">
                            {% if data.data.id > 0 %}
                                <div class="g-left-list" style="margin: 26px 10px 0;">
                                <div style="width: 100%;" class="a-line">
                                    <span class="p-name">{{ data.data.attachment.origin_name }}</span>
                                    </div><span class="reset-icon g-left-icon">
                                    </span>
                                </div>
                            {% endif %}
                        </div>
                        <input type="file" id="upload_file">
                        <div class="clearfix"></div>
                    </div>
                    <div class="add-mem-box" style="margin-top: 40px;">
                        <div class="mem-left fl"></div>
                        <div class="acc-opera-btn fl mem-btn" style="margin-left: 42px;">保存</div>
                        <a href="{{ path('project_list') }}" class="acc-opera-btn fl mem-cancel">取消</a>
                    </div>

                    <div class="clearfix"></div>
                </div>
            </form>
        </div>
    </div>
    {% endblock %}

{% block box %}
{% endblock %}


{% block javascript %}
    <script src="{{ asset('assets/js/bootstrap-datetimepicker.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/js/bootstrap-datetimepicker.zh-CN.js') }}" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {

        //  高度
        $('.mes-content').height($('.main-content').height() - 60);

        SidebarHighlighting('5');

        $('.form_datetime').datetimepicker({
            minView: "month", //选择日期后，不会再跳转去选择时分秒
            language:  'zh-CN',
            format: 'yyyy-mm-dd',
            todayBtn:  1,
            autoclose: 1
        });

        // 点击添加进度
        $('.mes-query-btn').on('click', function() {
            var keyword = $('.keyword-input');
            var start_time = $('#addtime');
            var end_time = $('#addtimes');

            if (start_time.val() == '') {
                popStatus(2, '请选择开始时间', 1,'', true);
                return;
            }

            if (end_time.val() == '') {
                popStatus(2, '请选择结束时间', 1,'', true);
                return;
            }

            if (start_time.val() > end_time.val()) {
                popStatus(2, '开始时间不得大于结束时间', 1,'', true);
                return;
            }

            if (keyword.val() == '') {
                popStatus(2, '请输入项目进度', 1,'', true);
                return;
            }

            $('.reset-icon').remove();

            var is_bg = '';

            var list_length = $('.add-speed-list').length;

            if (list_length % 2 == 0) {
                is_bg = 'add-bg';
            } else {
                is_bg = 'add-bg2';
            }

            var html = '<div class="add-speed-list '+ is_bg +'" data-starttime="'+ start_time.val() +'" data-endtime="'+ end_time.val() +'" data-name="'+ keyword.val() +'">\
                            <div class="add-speed-fl fl">'+ start_time.val() +'至'+ end_time.val() +'</div>\
                            <div class="add-speed-fr fr">'+ keyword.val() +'</div>\
                            <div class="clearfix"></div>\
                            <div class="reset-icon"></div>\
                        </div>';

            $('.add-speed-box').css('margin-bottom', '15px').prepend(html);

            start_time.val(''); end_time.val(''); keyword.val('');
        });

        // 点击项目进度删除按钮
        $('body').on('click', '.reset-icon', function() {

            var list_length = $('.add-speed-list').length;

            // 列表为1时  ->  margin-bottom == 0;
            if (list_length == 1) {
                $('.add-speed-box').css('margin-bottom', '0');
            } else {
                // 给下一个元素追加删除按钮
                $(this).parents('.add-speed-list').next('.add-speed-list').find('.add-speed-fr').after('<div class="reset-icon"></div>');
            }

            // 删除列表
            $(this).parents('.add-speed-list').remove();

        });

        // ajax 上传附件
        var attachment_id = "{{ data.data.attachment_id|default("") }}";
        function uploadFile() {
            var _file = this;
            var data = new FormData();
            data.append('attachment', _file.files[0]);

            URL_fileShareUpload = "{{ path('api_public_upload_attachment') }}";
            $.ajax({
                url:URL_fileShareUpload,
                type: 'POST',
                dataType: 'json',
                processData: false,
                contentType: false,
                data: data,
                success: function (data) {
                    if(data.errorCode == 0){

                        $('.upload-finish').html('');

                        attachment_id = data.data.attachment_id;
                        popStatus(1, '上传成功', 1,'', true);

                        var html = '<div class="g-left-list" style="margin: 26px 10px 0;">' +
                                    '<div style="width: 100%;" class="a-line">' +
                                    '<span class="p-name">'+ data.data.name +'</span> ' +
                                    '<span class="p-phone">15755364075</span>' +
                                    '</div><span class="reset-icon g-left-icon">' +
                                    '</span>' +
                                    '</div>';

                        $('.upload-finish').html(html);
                    } else {
                        alert(data.message);
                        return false;
                    }
                }
            });
        }
        $("#upload_file").on("change", uploadFile);


        // 点击删除文件名
        $('body').on('click', '.reset-icon.g-left-icon', function () {
            $(this).parent('.g-left-list').remove();
            attachment_id = "";
        });

        $(".mem-btn").on('click', function(){
//            var param = $('#member-submit').serializeObject();

            var project_name = $(".project-name").val();
            var project_type = $(".project-type").val();

            if($.trim(project_name) == ""){
                popStatus(2, '请输入项目名称', 1,'', true);
                return;
            }

            if($.trim(project_type) == ""){
                popStatus(2, '请输入项目类型', 1,'', true);
                return;
            }

            // 获取项目进度
            var process = [];
            $(".add-speed-list").each(function(){
                var $this = $(this);
                var obj = {};
                obj['name'] = $this.data("name");
                obj['start_at'] = $this.data("starttime");
                obj['end_at'] = $this.data("endtime");
                process.push(obj);
            })

            if(process.length == 0){
                popStatus(2, '请输入项目进度', 1,'', true);
                return;
            }

            var project_process = JSON.stringify(process);

            if(attachment_id == ""){
                popStatus(2, '请上传附件', 1,'', true);
                return;
            }

            var id = "{{ data.data.id }}";
            var prame = {"name":project_name,"type":project_type,"process":project_process,"attachment_id":attachment_id,"id":id};


            $.post("{{ path('api_admin_edit_project') }}",prame,function(data){

                console.log(data);
                if(data.errorCode == 0){
                    popStatus(1, '操作成功', 1,"{{ path('project_list') }}", true);
                } else {
                    popStatus(2, data.message, 1,'', true);
                }
            })



        })
    })
</script>
{% endblock %}
